<template>
  <div style="width: 100%">
    <div class="c-container">
      <div class="title">学员管理</div>
      <flexbox class="c-search">
        <el-input
          v-model="searchInfo.userName"
          placeholder="请输入学员姓名"
          class="sc-container"
        />
        <el-input
          v-model="searchInfo.deptName"
          placeholder="请输入部门"
          class="sc-container"
        />
        <el-input
          v-model="searchInfo.courseName"
          placeholder="请输入课程名称"
          class="sc-container"
        />
        <el-button type="primary" @click="getList">搜索</el-button>
      </flexbox>
    </div>
    <div
      xs-empty-icon="nopermission"
      xs-empty-text="暂无权限"
      class="finance-container">
      <el-table
        v-loading="loading"
        id="kms-table"
        :data="tableData"
        :height="tableHeight"
        :cell-style="cellStyle"
        :span-method="objectSpanMethod"
        border
        style="width: 100%"
        @row-click="handleRowClick">
        <el-table-column
          v-for="(item, index) in fieldList"
          :key="index"
          :prop="item.prop"
          :label="item.label"
        >
          <template
            slot-scope="scope">
            <template v-if="item.prop == 'courses'">{{ scope.row['allCourseSeconds'] | time(true) }}</template>
            <template v-else>
              <div :title="scope.row[item.prop]" class="table-head-name">{{ scope.row[item.prop] | time(item.isTime, item.prop, scope) }}</div>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          width="120"
          label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.native.prevent="check(true,scope.row)">
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="p-contianer">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :total="total"
          class="p-bar"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </div>
    <detail v-if="showDetail" ref="checkDetail" @hideSlider="check(false)"/>
  </div>
</template>

<script>
import table from '../mixins/table'
import {
  // eslint-disable-next-line no-unused-vars
  getReport, getReportListHead
} from '../../../api/kmsmanagement/report'
import detail from './detail'
import { timeKeepFormatter } from '@/utils/index.js'
export default {
  /** 客户管理 的 产品列表 */
  name: 'Students',
  components: {
    detail
  },
  filters: {
    time(val, isTime, prop, data) {
      if (!isTime) {
        return val
      }
      if (val == '--') {
        return val
      }
      val = Number(val)
      var sec = parseInt(val / 60)
      var min = Number((val - sec * 60) / 60)
      // eslint-disable-next-line no-unused-vars
      var res = Math.ceil(Number(min.toFixed(2)) * 10) / 10
      return sec + res
    }
  },
  mixins: [table],
  data() {
    return {
      kmsType: 'course',
      five_start_dis: true,
      fileValue: '',
      searchInfo: {
        userName: '',
        deptName: '',
        courseName: ''
      },
      fieldList: [],
      tableData: [],
      spanArr: {},
      pos: '',
      showDetail: false
    }
  },
  computed: {},
  mounted() {
    /** 控制table的高度 */
    window.onresize = () => {
      this.updateTableHeight()
    }
    this.getList()
    this.getListHead()
  },
  methods: {
    updateTableHeight() {
      var offsetHei = document.documentElement.clientHeight
      var removeHeight = 260
      this.tableHeight = offsetHei - removeHeight
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex != 3 && columnIndex != 4 && columnIndex != 5) {
        if (rowIndex in this.spanArr) {
          return {
            rowspan: this.spanArr[rowIndex].row,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
      return {
        rowspan: 1,
        colspan: 1
      }
    },
    /** 通过回调控制style */
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.property === 'name') {
        return { color: '#3E84E9', cursor: 'pointer' }
      } else {
        return ''
      }
    },
    getList() {
      this.loading = true
      var params = {
        page: this.currentPage,
        limit: this.pageSize
      }
      params = Object.assign(params, this.searchInfo)
      getReport(params)
        .then(res => {
          this.getFormaterData(res.data.list)
          this.total = res.data.totalRow
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    getFormaterData(list) {
      var index = 0
      var vm = this
      const data = {}
      var table = []
      list.forEach(item => {
        if (item.courses.list.length === 0) {
          // eslint-disable-next-line no-dupe-keys
          table.push({
            'standardStudySeconds': '--',
            'studyStatus': '--',
            'allCourseSeconds': item.courses.allCourseSeconds || '--',
            'studiedSeconds': '--',
            'allCourseStudiedSeconds': item.courses.allCourseStudiedSeconds || '--',
            'realname': item.realname,
            'deptName': item.deptName,
            'post': item.post,
            'title': '--',
            'username': item.username,
            'userId': item.userId
          })
          data[index] = { row: 1 }
          index++
        } else {
          item.courses.list.forEach((item2, index2) => {
            if (index2 === 0) {
              data[index] = { row: item.courses.list.length }
            }
            index++
            let params = {
              'standardStudySeconds': item2.standardStudySeconds,
              'studyStatus': item2.studyStatus,
              'allCourseSeconds': item.courses.allCourseSeconds || '--',
              'studiedSeconds': item.courses.list[index2].studiedSeconds || '--',
              'allCourseStudiedSeconds': item.courses.allCourseStudiedSeconds || '--',
              'realname': item.realname,
              'deptName': item.deptName,
              'post': item.post,
              'title': item2.title,
              'username': item.username,
              'userId': item.userId
            }
            table.push(params)
          })
        }
      })
      this.spanArr = data
      this.tableData = table
      this.$nextTick(function() {
        setTimeout(function() {
          vm.updateTableHeight()
        }, 200)
      })
    },
    getListHead() {
      getReportListHead().then(res => {
        for (let index = 0; index < res.data.length; index++) {
          const element = res.data[index]
          var width = 0
          if (!element.width) {
            if (element.name && element.name.length <= 6) {
              width = element.name.length * 15 + 45
            } else {
              width = 140
            }
          } else {
            width = element.width
          }

          this.fieldList.push({
            prop: element.fieldName,
            label: element.name,
            width: width,
            isTime: element.fieldName === 'standardStudySeconds' || element.fieldName === 'studiedSeconds' || element.fieldName === 'studiedSeconds' || element.fieldName === 'allCourseStudiedSeconds'
          })
        }
      })
    },
    check(val, data) {
      this.showDetail = val
      if (val) {
        this.$nextTick(function() {
          this.$refs.checkDetail.getDetail(data)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-table /deep/ thead th {
    background-color: #f5f7fa;
    font-weight: 400;
    border-color: #E6E6E6;
    color: #475059;
  }
  .el-table {
    tbody {
      tr {
        td {
          border-right-color: #e6e6e6;
        }
      }
    }
  }
  .p-contianer {
    position: relative;
    background-color: white;
    height: 44px;

    .p-bar {
      float: right;
      margin: 5px 100px 0 0;
      font-size: 14px !important;
    }
  }
  .c-container {
    height: 60px;
    position: relative;
    z-index: 100;
    margin-bottom: 50px;
    .title {
      float: left;
      padding: 0 20px;
      font-size: 18px;
      line-height: 60px;
    }
    .c-search {
     padding: 0 12px;
    }
    .sc-container {
      width: 200px;
      margin-right: 12px;
    }

    .right-container {
      margin-right: -10px;
      float: right;
      margin: 12px 20px 0 0;
      position: relative;
      display: inline-flex;
      .right-item {
        float: left;
        margin-right: 10px;
        padding: 8px 10px;
        font-size: 13px;
        border-radius: 2px;
      }

      .right-more-item {
        cursor: pointer;
        border: 1px solid #dcdfe6;
        background-color: white;
        font-size: 13px;
        color: #777;
        padding: 0 12px;
        border-radius: 2px;
        height: 31px;
      }
    }
  }
</style>

